<template>
	<div class="popup-rules">
		<cl-popup direction="center" :visible.sync="visible">
			<span class="popup-rules__close cl-icon-close" @click="close"></span>

			<div scroll-y class="popup-rules__container">
				<h1 class="h1">{{ rule.title }}</h1>
				<div class="popup-rules__rich-text" v-html="rule.content"></div>
			</div>
		</cl-popup>
	</div>
</template>

<script>
import ClPopup from '@/components/popup';

export default {
	components: {
		ClPopup
	},
	props: {
		rule: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			content: '',
			visible: false
		};
	},

	methods: {
		open() {
			this.visible = true;
			return;
			this.$hmt.push('首页点击事件', '进入分享有礼');

			this.$service.bwbt.shareTemplate
				.template({
					type: 13
				})
				.then(res => {
					this.content = res;
					this.visible = true;
				});
		},

		close() {
			this.visible = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.popup-rules {
	/deep/.cl-popup {
		border-radius: 14px;

		&__container {
			padding: 20px;
		}
	}

	&__btn {
		position: absolute;
		right: 0;
		top: 254px;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: 6px 20px;
		margin: 0;
		border-radius: 30px 0 0 30px;
		z-index: 99;
		font-size: 24px;
		height: auto;
		line-height: normal;
		border: 0;

		&::after {
			border: 0;
		}
	}

	&__title {
		font-size: 30px;
		text-align: center;
		flex: 1;
	}

	&__close {
		position: absolute;
		right: 20px;
		top: 18px;
		font-size: 40px;
		z-index: 9;
	}

	&__container {
		padding: 5px 0;
		max-height: 800px;
		width: 600px;
		overflow: hidden auto;

		/deep/h2 {
			display: block;
			text-align: center;
			font-size: 32px;
		}

		/deep/.rule {
			margin-top: 20px;
			line-height: 50px;
			font-size: 28px;
			padding: 0 20px;
			letter-spacing: 1px;
		}
	}
}
.h1 {
	font-size: 30px;
	text-align: center;
}
</style>
